<script setup lang="ts">
import { fetchGoodsDetailData } from '@/api/goods';
import type { IGood } from '@/types';
import { useAsync } from '@/use/useAsync';
import { useRoute } from 'vue-router';
import CartControl from '../shop/components/CartControl.vue';
import { onMounted, ref } from 'vue';
import OpNavBar from '@/components/OpNavBar.vue';


const { params } = useRoute()
const { data } = useAsync(() => fetchGoodsDetailData(params.id as string), {} as IGood)

const imgContRef = ref()
const imgRef = ref()

onMounted(() => {
  const easeOutCubic = (t: number, b: number, c: number, d: number) => {
    t /= d
    t--
    return c * (t * t * t + 1) + b
  }
  const imgContEle = imgContRef.value
  const imgEle = imgRef.value
  const imgHeight = imgContEle.clientHeight
  let startY = 0
  window.addEventListener('touchstart', (e) => {
    const y = e.targetTouches[0].clientY
    if (y < imgHeight) {
      return
    }
    startY = y
    imgContEle.classList.remove('rebound')
    imgEle.classList.remove('rebound')
  })
  window.addEventListener('touchmove', (e) => {
    if (!startY) {
      return
    }
    e.preventDefault()
    const y = e.targetTouches[0].clientY
    const moveDis = y - startY
    if (window.scrollY <= 0 && moveDis > 0) {
      const height = easeOutCubic(moveDis, imgHeight, 130, 300)
      imgContEle.style.height = `${height}px`
      const scale = easeOutCubic(moveDis, 1, 0.2, 300)
      imgEle.style.transform = `translate(-50%, -50%) scale(${scale})`
    }
  },
  {
    passive: false,
  }
)
  window.addEventListener('touchend', () => {
    startY = 0
    imgContEle.style.height = imgHeight + 'px'
    imgEle.style.transform = 'translate(-50%, -50%)'
    imgContEle.classList.add('rebound')
    imgEle.classList.add('rebound')
  })
})
</script>

<template>
  <div class="goods-page op-fullscreen">
    <OpNavBar></OpNavBar>
    <div class="goods__img-container" ref="imgContRef">
      <img class="img" ref="imgRef" :src="data.imgUrl">
    </div>
    <div class="content-wrapper">
      <div class="goods__well">
        <div class="goods__name">{{ data.name }}</div>
        <div class="goods__exrta">
          <span class="count">月售{{ data.sellCount }}份</span>
          <span>评分 {{ data.rating }}</span>
        </div>
        <div class="goods__price">
          <div class="price">
            <span class="now">
              ￥<span>{{ data.price }}</span>
            </span>
            <span class="old">￥{{ data.oldPrice }}</span>
          </div>
          <CartControl :data="data"></CartControl>
        </div>
      </div>
      <div class="goods__well">
        <div class="goods__well__row">
          <div class="label">红包</div>
        </div>
        <div class="goods__well__row">
          <div class="label">保障</div>
          <div>不支持七天无理由退换</div>
        </div>
      </div>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.goods-page {
  .rebound {
    transition: 0.2s ease-out;
  }

  .content-wrapper {
    padding: 0 8px 75px 8px;
  }

  .goods {
    &__img-container {
      position: relative;
      height: 250px;
      overflow: hidden;
      background-color: cornflowerblue;

      .img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
      }
    }

    &__well {
      background: white;
      border-radius: 8px;
      padding: 10px;
      margin-top: 8px;

      &__row {
        display: flex;
        align-items: center;
        margin-bottom: 5px;

        .label {
          color: gray;
          font-size: 13px;
          margin: 0 15px 0 15px;
        }
      }
    }

    &__name {
      font-size: 18px;
    }

    &__extra {
      margin: 8px 0;
      font-size: 12px;
      color: gray;

      .count {
        margin-right: 6px;
      }
    }

    &__price {
      display: flex;
      justify-content: space-between;
      align-items: center;


      .price {
        align-items: baseline;

        .now {
          color: red;
          margin-right: 4px;
          span {
            font-size: 22px;
            font-weight: bold;
          }
        }

        .old {
          color: gray;
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>
